import React, { useEffect, useState } from 'react'
import QRCode from "qrcode.react"; // 引入二维码
import './posterPop.scss';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
// 获取redux切片的数据
import { useDispatch,} from 'react-redux'
//导如切片用于修改数据的函数

export default function Piao() {
  useEffect(() => {
    var obj = JSON.parse(sessionStorage.getItem('piao'));
    var arr = [];
    arr.push(obj.orderid);
    setList(arr)

  }, [])

  useEffect(() => {
    get()
  }, [])
  const qrcodeUrl = 'http://123.57.180.216/showpiao' // 二维码链接
  // const qrcodeUrl = '12321312' // 二维码链接+

  let dispatch = useDispatch();

  const [list, setList] = useState([])
  const [move, setMove] = useState([])

  let get = async () => {
    let id = JSON.parse(sessionStorage.getItem('piao')).orderid.moveid
    let { data } = await axios.post('http://123.57.180.216:3000/users/getmove', { id })
    setMove(data.data)
    sessionStorage.setItem('movelist', JSON.stringify(data.data))
    console.log(data.data);
  }

  return (
    <div className='box_piao'>
      <div className="posterPop">
        {/* 二维码 */}
        <span style={{ fontSize: '20px', fontWeight: 'bold' }}>{move.name}</span>
        <span style={{ marginTop: '20px' }}>{move.time}</span>
        {
          list.map((ele) => (
            <div key={ele._id}>
              <QRCode
                className="qrcode"
                // value={JSON.stringify(ele)}
                value={qrcodeUrl}
                size={200} // 二维码图片大小（宽高115px）
                bgColor="#fff1d1" // 二维码背景颜色
                fgColor="#c7594a" // 二维码图案颜色
              />
              <span style={{ fontSize: '18px', fontWeight: 'bold', marginLeft: '55px' }}>{ele._id}</span>
            </div>
          ))
        }
        <span style={{ fontSize: '16px', color: '#999', marginTop: '10px', width: '240px', textAlign: 'center' }}>请到自助取票机处扫描二维码或输入卷码领取纸质票入场</span>
      </div>
    </div>
  )
}
